<template>
  <div class="setting-container">
    <div class="app-container">
      <div>
        <el-card class="box-card">
          <el-form ref="form" :model="form" label-width="80px">
            <div style="display: flex">
              <el-form-item label="关键字">
                <el-input
                  v-model="form.keyword"
                  style="width: 270px"
                  placeholder="根据标题搜索"
                />
              </el-form-item>
              <el-form-item label="状态">
                <el-select
                  v-model="form.state"
                  style="width: 270px"
                  placeholder="请选择"
                >
                  <el-option label="启用" value="1" />
                  <el-option label="禁用" value="0" />
                </el-select>
              </el-form-item>

              <el-button
                style="margin-left: 40px; height: 40px"
                @click="searchArticlesList()"
              >
                搜索
              </el-button>
              <el-button
                style="margin-left: 10px; height: 40px"
                type="primary"
                @click="resetSearchArticlesList()"
              >
                清除
              </el-button>
              <el-button
                type="success"
                class="addgreen"
                @click="openAddSkillsDialog()"
              >
                <i class="el-icon-edit" />
                新增技巧
              </el-button>
            </div>
          </el-form>
          <el-alert
            :title="`数据一共${total}条`"
            type="info"
            :closable="false"
            show-icon
          />
          <el-table :data="tableData" class="eltable">
            <el-table-column
              type="index"
              :index="indexFn"
              label="序号"
              width="130"
            />
            <el-table-column prop="title" label="文章标题" width="230" />
            <el-table-column prop="visits" label="阅读数" />
            <el-table-column prop="username" label="录入人" width="140" />
            <el-table-column prop="createTime" label="录入时间" width="180" />
            <el-table-column prop="state" label="状态" width="190">
              <template #default="{ row }">
                <span>{{ row.state === 1 ? '启用' : '禁用' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作">
              <template #default="{ row }">
                <el-button type="text" @click="showArticle(row.id)">
                  预览
                </el-button>
                <el-button type="text" @click="editState(row.id, row.state)">{{
                  row.state === 1 ? '禁用' : '启用'
                }}</el-button>
                <span v-if="row.state === 0" style="margin-left: 15px">
                  <el-button disabled type="text" @click="editArticle(row.id)">
                    修改
                  </el-button>
                  <el-button disabled type="text" @click="delArticle(row.id)">
                    删除
                  </el-button>
                </span>
                <span v-else style="margin-left: 15px">
                  <el-button type="text" @click="editArticle(row.id)">
                    修改
                  </el-button>
                  <el-button type="text" @click="delArticle(row.id)">
                    删除
                  </el-button>
                </span>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              :current-page="page"
              :page-sizes="[2, 5, 10, 15]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
        <el-dialog
          :title="title"
          :visible.sync="dialogFormVisible"
          @close="closeAddUserDialog()"
        >
          <el-form :model="addUserForm">
            <el-form-item label="文章标题" :label-width="formLabelWidth">
              <el-input v-model="addUserForm.title" autocomplete="off" />
            </el-form-item>
            <el-form-item label="文章内容" :label-width="formLabelWidth">
              <quillEditor v-model="addUserForm.articleBody" class="fuwenben" />
            </el-form-item>
            <el-form-item label="视频地址" :label-width="formLabelWidth">
              <el-input v-model="addUserForm.videoURL" autocomplete="off" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="closeAddUserDialog()">取 消</el-button>
            <el-button type="primary" @click="submitArticle">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog
          class="showArctile"
          :title="showTitle"
          :visible.sync="showArticleVisible"
          @close="closeShowUserDialog()"
        >
          <div class="titleshow">{{ Data.title }}</div>
          <div class="timeshow">
            {{ Data.createTime | formatTime('YYYY年MM月DD日') }}
            {{ Data.username }}
            超级管理员
            <i class="el-icon-view" />
            {{ Data.visits }}
          </div>
          <div class="contantshow" v-html="Data.articleBody" />
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {
  getArticlesListApi,
  addArticlesListApi,
  delArticlesListApi,
  editArticlesListApi,
  getArticlesListDeatilApi,
  editArticlesListDeatilApi,
  searchArticlesListApi
} from '@/api/interviewSkills'
// import { moment } from '@/filters'

export default {
  components: { quillEditor },
  props: {},
  data() {
    return {
      form: {
        keyword: '',
        state: '1'
      },
      title: '',
      showTitle: '预览文章',
      tableData: [],
      Data: {},
      page: 1,
      pageSize: 5,
      total: 20,
      //   新增用户弹层
      dialogTableVisible: false,
      dialogFormVisible: false,
      // 预览
      showArticleVisible: false,
      addUserForm: {
        title: '',
        videoURL: '',
        articleBody: ''
      },
      formLabelWidth: '130px'
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getArticlesList()
    console.log(this.tableData)
  },
  mounted() {},
  methods: {
    async getArticlesList() {
      const res = await getArticlesListApi(this.page, this.pageSize)
      // console.log(res)
      this.tableData = res.items
      this.total = res.counts
      // console.log(this.tableData)
    },

    handleSizeChange(val) {
      this.page = 1
      this.pageSize = val
      this.getArticlesList()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getArticlesList()
    },
    closeAddUserDialog() {
      this.dialogFormVisible = false
    },
    openAddSkillsDialog() {
      this.dialogFormVisible = true
      this.title = '新增技巧'
    },
    indexFn(index) {
      // console.log(index)
      return index + 1 + (this.page - 1) * this.pageSize
    },
    async submitArticle() {
      if (this.addUserForm.id) {
        await editArticlesListApi(this.addUserForm)
        this.$message.success('修改成功')
      } else {
        await addArticlesListApi(this.addUserForm)
        this.$message.success('新增成功')
      }
      this.getArticlesList()
      this.dialogFormVisible = false
    },
    //      function  HtmlToText(htmlStr) {
    //         let theConvertDiv=document.createElement("div")
    //         theConvertDiv.innerHTML=htmlStr
    //         return theConvertDiv.textContent || theConvertDiv.innerText || ""
    // } ,

    async showArticle(id) {
      const res = await getArticlesListDeatilApi(id)
      this.Data = res
      console.log(res)

      this.showArticleVisible = true
    },
    closeShowUserDialog() {
      this.showArticleVisible = false
    },

    delArticle(id) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await delArticlesListApi(id)
          this.getArticlesList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    async editArticle(id) {
      this.dialogFormVisible = true
      const res = await getArticlesListDeatilApi(id)
      // console.log(res)
      this.addUserForm = res
      this.title = '修改'
    },
    async editState(id, state) {
      console.log(id, state)
      let status = 0
      if (state === 1) {
        status = 0
      } else {
        status = 1
      }
      await editArticlesListDeatilApi(id, status)
      this.getArticlesList()
    },
    // 搜索
    async searchArticlesList() {
      const res = await searchArticlesListApi(this.form)
      this.tableData = res.items
      console.log(this.form)
      console.log(res)
    },
    resetSearchArticlesList() {
      this.form = {
        keyword: '',
        state: ''
      }
      this.getArticlesList()
    }
  }
}
</script>
<style scoped>
.addgreen {
  margin-left: 340px;
  height: 40px;
}
.block {
  float: right;
  margin: 20px 0;
}
.eltable {
  width: 100%;
  margin-top: 25px;
}
::v-deep .el-dialog__header {
  background-color: #409eff;
}
::v-deep .el-dialog__title {
  color: #fff;
}
::v-deep .el-dialog__body {
  padding: 50px 40px 50px 0px;
}
.dialog-footer {
  text-align: center;
}
::v-deep .el-dialog__headerbtn .el-icon-close:before {
  color: #fff;
}
.showArctile {
  /* padding: 20px; */
}
.titleshow {
  font-size: 26px;
  margin-bottom: 8px;
}
::v-deep [data-v-fa3cefc8] .el-dialog__body {
  padding-top: 20px;
  padding-left: 25px;
}
.timeshow {
  margin-bottom: 8px;
}
.contantshow {
  background-color: #f5f5f5;
  padding: 30px 0;
}
</style>
